<template>
  <div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="changeMuseum"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>

    <card>
      <div class="flexCSB">
        <div>
          <DatePicker
            format="yyyy-MM-dd"
            type="daterange"
            placeholder="请选择起止时间"
            style="width: 400px; margin-right: 10px"
            v-model="time"
            @on-change="changeDate"
          ></DatePicker>
          <el-input
            size="large"
            @input="change"
            style="width: 300px"
            placeholder="请输入活动名称"
            v-model="name"
          ></el-input>
          <Button type="primary" @click="getActivityMpMenuConfig"
            >获取微信公众号活动菜单配置</Button
          >
        </div>

        <div>
          <Button type="primary" @click="create">新增活动</Button>
        </div>
      </div>
      <div flexCSB style="margin-top: 10px">
        <el-radio-group
          size="small"
          @change="change"
          v-model="isScheduled"
          style="margin-right: 10px"
        >
        <el-radio-button label="全部">全部</el-radio-button>
          <el-radio-button label="立即发布">立即发布</el-radio-button>
          <el-radio-button label="定时发布">定时发布</el-radio-button>
        </el-radio-group>
        <el-radio-group size="small" @change="change" v-model="states">
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button :label="1">活动报名中</el-radio-button>
          <el-radio-button :label="2">活动进行中</el-radio-button>
          <el-radio-button :label="3">报名已结束</el-radio-button>
        </el-radio-group>
      </div>
      <el-table
        size="small"
        v-loading="loading1"
        :data="tableData"
        class="table"
      >
        <template v-for="item in tableColumn">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </template>
        <el-table-column label="活动报名时间" width="260" align="center">
            <template slot-scope="scope">
              {{scope.row.applyBeginDate+'-'+scope.row.applyEndDate}}
            </template>
          </el-table-column>
          <el-table-column label="活动时间" width="160" align="center">
            <template slot-scope="scope">
              {{scope.row.beginDate+'~'+scope.row.endDate}}
            </template>
          </el-table-column>
          <el-table-column label="限制人数" align="center">
            <template slot-scope="scope">
              {{scope.row.limitNum+'人'}}
            </template>
          </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="540">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="handel(scope)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="del(scope.row)"
              >删除</el-button
            >
            <!--                 <el-button
                  size="small"
                  v-if="!scope.row.top"
                  type="warning"
                  @click="top(scope.row.id)">置顶</el-button>
                <el-button
                  size="small"
                  v-if="scope.row.top"
                  type="warning"
                  @click="top(scope.row.id)">取消置顶</el-button> -->
            <el-button size="small" type="info" @click="list(scope.row.id)"
              >报名详情</el-button
            >
            <el-button size="small" type="warning" @click="code(scope.row.id)"
              >签到二维码</el-button
            >
            <el-button size="small" type="warning" @click="code2(scope.row.id)"
              >报名二维码</el-button
            >
            <el-button
              size="small"
              type="error"
              @click="routerPath(scope.row.id)"
              >路径</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Page
        show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="currentChange"
      />
    </card>

    <Modal title="活动操作" v-model="modal1" width="60%">
      <el-form
        :model="newData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input style="width: 100%" v-model="newData.name"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <!-- <el-input style="width: 100%" v-model="newData.type"></el-input> -->
          <el-select filterable v-model="newData.type" placeholder="请选择活动类型"  style="width: 100%">
            <el-option
              v-for="item in activityList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动起止日期" prop="time">
          <el-date-picker
            v-model="newData.time"
            type="daterange"
            style="width: 100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动报名日期" prop="time2">
          <el-date-picker
            v-model="newData.time2"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!--             <el-form-item label="限制人数" prop="limitNum">
              <InputNumber :min="1" v-model="newData.limitNum" style="width:100%"></InputNumber>
            </el-form-item> -->
        <el-form-item label="活动地址" prop="address">
          <el-input type="textarea" v-model="newData.address"></el-input>
        </el-form-item>
        <el-form-item label="参与人员" prop="formType">
          <el-radio-group size="small" v-model="newData.formType">
            <el-radio-button :label="1">需要参与人员的信息</el-radio-button>
            <el-radio-button :label="2">无需参与人员的信息</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="同一账号单次限制报名人数" prop="singleLimit">
          <el-input-number
            v-model="newData.singleLimit"
            style="width: 100%"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <Divider />
        <el-form-item label="报名字段" prop="formFields">
          <el-button type="primary" size="small" @click="clickiduan"
            >点击设置</el-button
          >
          <el-table size="small" :data="tableData2" class="table">
            <template v-for="item in tableColumn2">
              <el-table-column
                :prop="item.prop"
                :label="item.label"
              ></el-table-column>
            </template>
          </el-table>
        </el-form-item>
        <el-form-item label="场次配置" prop="rules">
          <el-button type="primary" size="small" @click="clickRule"
            >点击设置</el-button
          >
          <el-table size="small" :data="tableData3" class="table">
            <template v-for="item in tableColumn3">
              <el-table-column
                :prop="item.prop"
                :label="item.label"
              ></el-table-column>
            </template>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.id"
                  type="success"
                  size="small"
                  @click="handel2(scope)"
                  >编辑人数</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <Divider />
        <el-form-item label="活动图片" prop="mainPic">
          <vue-uploadimg
            :imgUrl="imgUrl"
            :clear="clear"
            style="width: 400px"
            @uploadImg="uploadImg"
          ></vue-uploadimg>
        </el-form-item>
        <el-form-item label="活动描述" prop="detail">
          <vue-tinymce
            v-if="!loading1"
            :value="newData.detail"
            @catchData="catchData"
          ></vue-tinymce>
        </el-form-item>
        <el-form-item label="定时发布时间" prop="scheduledReleaseTime">
          <el-date-picker
            v-model="newData.scheduledReleaseTime"
            type="datetime"
            style="width: 100%"
            placeholder="如果需要定时发布活动的话，请设置此项"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="width: 200px"
          @click="submit"
          :loading="loading2"
          >立即提交</el-button
        >
      </span>
    </Modal>

    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="报名字段"
      :show-close='false'
      :modal="false"
      :visible.sync="modal2"
      width="35%"
    >
      <div style="display: flex; margin-bottom: 10px">
        <el-input placeholder="报名字段" v-model="newData2.name"></el-input>
        <el-select
          filterable
          placeholder="是否必填"
          style="margin: 0 10px"
          v-model="newData2.required"
        >
          <el-option label="必填" value="必填"> </el-option>
          <el-option label="非必填" value="非必填"> </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="create2">新增</el-button>
      </div>
      <el-table size="small" :data="tableData2" class="table">
        <template v-for="item in tableColumn2">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
          ></el-table-column>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.field == 'name'"
              @click="bianji(scope)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              v-if="scope.row.field != 'name' && scope.row.field != 'phone'"
              @click="delziduan(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button size="small" type="primary" @click="modal2 = false">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="场次配置"
      :modal="false"
      :visible.sync="modal3"
      width="45%"
      :show-close="false"
    >
      <el-form
        :model="newData3"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="日期" prop="bookDate">
          <el-select
            filterable
            placeholder="请选择日期"
            style="width: 100%"
            v-model="newData3.bookDate"
          >
            <template v-for="item in timeList">
              <el-option :label="item" :value="item"> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="时间段" prop="timeRange">
          <el-time-picker
            is-range
            style="width: 100%"
            v-model="newData3.timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="限制人数" prop="limitNum">
          <InputNumber
            :min="1"
            v-model="newData3.limitNum"
            style="width: 100%"
          ></InputNumber>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        size="small"
        style="width: 140px; float: right; margin-bottom: 10px"
        @click="create3"
        >新增</el-button
      >
      <el-table size="small" :data="tableData3" class="table">
        <template v-for="item in tableColumn3">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
          ></el-table-column>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="delRule(scope)"
              >删除</el-button
            >
            <el-button size="small" type="info" @click="copyRule(scope)"
              >复制</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button size="small" type="primary" @click="modal3 = false">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="编辑操作"
      :modal="false"
      :visible.sync="modal8"
      width="35%"
      :show-close="true"
    >
      <el-form
        :model="newData6"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
      <el-form-item label="字段" prop="name">
          <el-input placeholder="报名字段" v-model="newData6.name"></el-input>
        </el-form-item>
        <el-form-item label="字段" prop="name">
          <el-select
          filterable
          placeholder="是否必填"
          style="margin: 0 10px"
          v-model="newData6.required"
        >
          <el-option label="必填" value="必填"> </el-option>
          <el-option label="非必填" value="非必填"> </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" type="primary" @click="save">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="报名详情"
      :modal="false"
      :visible.sync="modal4"
      width="70%"
    >
      <Button type="success" @click="download">导出表格</Button>
      <el-table
        size="small"
        v-loading="loading3"
        :data="tableData4"
        class="table"
      >
        <template v-for="item in tableColumn5">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
          ></el-table-column>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="warning" @click="lookDetal(scope.row)"
              >查看报名人员信息</el-button
            >
            <!-- <el-button
                  type="danger"
                  @click="black(scope.row)">拉入黑名单</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="解冻时间"
      :modal="false"
      :visible.sync="modal5"
      width="30%"
    >
      <el-date-picker
        v-model="newData4.time"
        type="datetime"
        placeholder="请输入解冻时间"
        style="width: 100%"
      >
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit3" :loading="loading4"
          >立即提交</el-button
        >
        <el-button type="info" @click="modal5 = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="报名人员信息"
      :modal="false"
      :visible.sync="modal6"
      width="40%"
    >
      <el-table size="small" :data="tableData5" class="table">
        <template v-for="item in tableColumn4">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
          ></el-table-column>
        </template>
      </el-table>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="编辑人数"
      :modal="false"
      :visible.sync="modal7"
      width="40%"
    >
      <el-input v-model="newData5.limitNum"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="width: 200px"
          @click="submit5"
          :loading="loading5"
          >立即提交</el-button
        >
      </span>
    </el-dialog>
    
          <Modal
            title="微信公众号菜单小程序页面路径"
            v-model="router"
            :styles="{ top: '20px' }"
          >
            <p>
              小程序活动列表页面: {{ activityListPagePath }}
              <span
                v-clipboard:copy="activityListPagePath"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                style="color: #57c5f7; margin-left: 30px; cursor: pointer"
                >复制</span
              >
            </p>
            <p>
              	我的活动列表页面: {{ mineBookPagePath }}
              <span
                v-clipboard:copy="mineBookPagePath"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                style="color: #57c5f7; margin-left: 30px; cursor: pointer"
                >复制</span
              >
            </p>
           
             
          </Modal>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      index:0,
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: false,
      modal6: false,
      modal7: false,
      modal8:false,
router:false,
      newData5: {
        limitNum: "",
        id: "",
      },

      clear: false,

      museumId: "",
      id: "",
      activityId: "",
      imgUrl: "",
      name: "",
      states: 0,
      size: 10,
      current: 1,
      time: [],
      isScheduled: "全部",
      total: 0,
      joinId: "",

      newData: {
        address: "",
        time: [],
        time2: [],
        detail: "",
        formFields: [],
        limitNum: 100,
        mainPic: "",
        name: "",
        scheduledReleaseTime: "",
        type: "",
        top: false,
        formType: 1,
        singleLimit: 1,
      },
      rules: {},
      newData2: {
        field: "",
        name: "",
        required: "必填",
      },
      newData6:{
        field: "",
        name: "",
        required: "必填",
      },
      newData3: {
        bookDate: "",
        limitNum: "",
        timeRange: "",
      },
      newData4: {
        openid: "",
        time: "",
        phone: "",
        name: "",
      },

      timeList: [],
      museumList: [],
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],

      tableColumn: [
        {
          label: "活动名称",
          prop: "name",
        },
         {
          label: "活动类型",
          prop: "type",
        },
        {
          label: "活动地址",
          prop: "address",
        },
      ],
      tableColumn2: [
        {
          label: "字段名称",
          prop: "name",
        },
        {
          label: "是否必填",
          prop: "required",
        },
      ],
      tableColumn3: [
        {
          label: "日期",
          prop: "bookDate",
        },
        {
          label: "限制人数",
          prop: "limitNum",
        },
        {
          label: "时间段",
          prop: "timeRange",
        },
      ],
      tableColumn4: [],
      activityList:[],
      tableColumn5: [
        {
          label: "报名日期",
          prop: "bookDate",
        },
        {
          label: "报名时间",
          prop: "timeRange",
        },
        {
          label: "报名人数",
          prop: "bookNum",
        },
      ],
    };
  },
  created() {
    this.getActivityType()
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.getActivityList();
    }
  },
  methods: {
      // 复制
    onCopy () {
      this.$Message.success('链接复制成功')
    },

    // 复制失败
    onError () {
      this.$Message.error('链接复制失败')
    },
    getActivityType(){
      this.$http("/stage/activity/getActivityType",{},"get",(res)=>{
        console.log(res);
        if(res.data.code==200){
          this.activityList=res.data.data
        }else{
          this.$Message.error(res.data.msg);
        }
      })
    },
    // 获取博物馆列表
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getActivityList();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    bianji(scope){
      console.log(scope);
      console.log(this.tableData2);
      this.modal8=true
      this.index=scope.$index
      this.newData6={
        name:this.tableData2[scope.$index].name,
        required:this.tableData2[scope.$index].required
      }
    },
    // 切换博物馆
    changeMuseum() {
      this.current = 1;
      this.getActivityList();
    },
    // 获取活动列表
    getActivityList() {
      console.log(this.states);
      this.loading1 = true;
      this.$http(
        "/stage/activity/getActivityList",
        {
          current: this.current,
          end: this.time[1] ? this.getTime(this.time[1]) : "",
          isScheduled: this.isScheduled == "全部"?"null": (this.isScheduled == "定时发布" ? true : false),
          museumId: this.museumId,
          name: this.name,
          size: this.size,
          start: this.time[0] ? this.getTime(this.time[0]) : "",
          states: this.states == 0 ? "" : this.states,
        },
        "post",
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
            this.loading1 = false;
          } else {
            this.loading1 = false;
          }
        }
      );
    },
    getActivityMpMenuConfig() {
      this.loading1 = true;
      this.$http(
        "/stage/activity/getActivityMpMenuConfig",
        {
          museumId: this.museumId,
        },
        "get",
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.router =true
            this.activityListPagePath=res.data.data.activityListPagePath
            this.mineBookPagePath = res.data.data.mineBookPagePath
            this.loading1 = false;
          } else {
            this.loading1 = false;
          }
        }
      );
    },
    // 切换页面
    currentChange(data) {
      this.current = data;
      this.getActivityList();
    },
    // 改变日期
    changeDate() {
      this.current = 1;
      this.getActivityList();
    },
    // 输入活动名称
    change() {
      this.current = 1;
      this.getActivityList();
    },
    // 创建活动
    create() {
      this.modal1 = true;
      this.newData = {
        address: "",
        time: [],
        time2: [],
        detail: "",
        formFields: [],
        
        limitNum: 100,
        mainPic: "",
        name: "",
        scheduledReleaseTime: "",
        type: "",
        top: false,
        formType: 1,
        singleLimit: 1,
      };
      this.imgUrl = "";
      this.tableData3 = [];
      this.tableData2 = [
        {
          field: "name",
          name: "姓名",
          required: "必填",
        },
        {
          field: "phone",
          name: "手机号",
          required: "必填",
        },
      ];
      this.id = "";
    },
    // 删除活动
    del(data) {
      this.$confirm("此操作将删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
      })
        .then(() => {
          this.$http(
            "/stage/activity/deleteActivity",
            {
              id: data.id,
              museumId: this.museumId,
            },
            "post",
            (res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除成功");
                this.getActivityList();
              } else {
                this.errorMessage(res.data.msg);
              }
            }
          );
        })
        .catch(() => {});
    },
    save(){
      this.tableData2.map((item,index)=>{
        if(index==this.index){
          item.name=this.newData6.name,
          item.required=this.newData6.required
        }
      })
      this.modal8=false
    } ,
    // 编辑活动
    handel(data) {
      console.log(data);
      this.newData = {
        address: data.row.address,
        time: [data.row.beginDate, data.row.endDate],
        time2: [data.row.applyBeginDate, data.row.applyEndDate],
        detail: data.row.detail,
        limitNum: data.row.limitNum,
        mainPic: data.row.mainPic,
        name: data.row.name,
        scheduledReleaseTime: data.row.scheduledReleaseTime
          ? data.row.scheduledReleaseTime
          : "",
        type: data.row.type,
        top: data.row.top,
        formType: data.row.formType,
        singleLimit: data.row.singleLimit,
      };
      this.imgUrl = data.row.mainPic;
      this.tableData2 = data.row.forms;
      for (let i = 0; i < this.tableData2.length; i++) {
        if (this.tableData2[i].required) {
          this.tableData2[i].required = "必填";
        } else {
          this.tableData2[i].required = "非必填";
        }
      }
      this.tableData3 = data.row.rules;
      this.modal1 = true;
      this.id = data.row.id;
    },
    // 输入文本
    catchData(data) {
      this.newData.detail = data;
    },
    // 提交活动
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let data = {};
          if (this.newData.name == "") {
            this.$Message.error("请输入活动名称");
            return false;
          }
          if (this.newData.address == "") {
            this.$Message.error("请输入活动地址");
            return false;
          }
          if (this.newData.detail == "") {
            this.$Message.error("请输入活动描述");
            return false;
          }
          if (this.newData.type == "") {
            this.$Message.error("请选择活动类型");
            return false;
          }
          if (!this.newData.time) {
            this.$Message.error("请选择活动起止时间");
            return false;
          }
          if (!this.newData.time2) {
            this.$Message.error("请选择报名起止时间");
            return false;
          }
          if (!this.newData.singleLimit) {
            this.$Message.error("请输入单次限制人数");
            return false;
          }
          if (this.tableData2.length == 0) {
            this.$Message.error("请设置报名字段");
            return false;
          }
          if (this.tableData3.length == 0) {
            this.$Message.error("请设置场次配置");
            return false;
          }

          let formFields = this.tableData2;
          for (let i = 0; i < formFields.length; i++) {
            formFields[i].required =
              formFields[i].required == "必填" ? true : false;
          }

          this.loading2 = true;
          if (this.id == "") {
            console.log(this.newData.time2);
            data = {
              address: this.newData.address,
              beginDate: this.getTime(this.newData.time[0]),
              endDate: this.getTime(this.newData.time[1]),
              applyBeginDate: this.newData.time2[0],
              applyEndDate: this.newData.time2[1],
              detail: this.newData.detail,
              formFields: formFields,
              rules: this.tableData3,
              limitNum: this.newData.limitNum,
              mainPic: this.newData.mainPic,
              name: this.newData.name,
              scheduledReleaseTime:
                this.newData.scheduledReleaseTime != ""
                  ? this.getTime2(this.newData.scheduledReleaseTime)
                  : "",
              type: this.newData.type,
              museumId: this.museumId,
              top: this.newData.top,
              formType: this.newData.formType,
              singleLimit: this.newData.singleLimit,
            };
            this.$http("/stage/activity/saveActivity", data, "post", (res) => {
              if (res.data.code == 200) {
                this.loading2 = false;
                this.$Message.success("新增成功");
                this.modal1 = false;
                this.getActivityList();
              } else {
                this.loading2 = false;
                this.$Message.error(res.data.msg);
              }
            });
          } else {
            data = {
              address: this.newData.address,
              beginDate: this.getTime(this.newData.time[0]),
              endDate: this.getTime(this.newData.time[1]),
              applyBeginDate: this.newData.time2[0],
              applyEndDate: this.newData.time2[1],
              detail: this.newData.detail,
              formFields: formFields,
              rules: this.tableData3,
              limitNum: this.newData.limitNum,
              mainPic: this.newData.mainPic,
              name: this.newData.name,
              scheduledReleaseTime:
                this.newData.scheduledReleaseTime != ""
                  ? this.getTime2(this.newData.scheduledReleaseTime)
                  : "",
              type: this.newData.type,
              id: this.id,
              museumId: this.museumId,
              top: this.newData.top,
              formType: this.newData.formType,
              singleLimit: this.newData.singleLimit,
            };
            this.$http(
              "/stage/activity/updateActivity",
              data,
              "post",
              (res) => {
                if (res.data.code == 200) {
                  this.loading2 = false;
                  this.$Message.success("修改成功");
                  this.modal1 = false;
                  this.getActivityList();
                } else {
                  this.loading2 = false;
                  this.$message.error(res.data.msg);
                }
              }
            );
          }
        }
      });
    },
    // 提交图片
    uploadImg(data) {
      this.imgUrl = data;
      this.newData.mainPic = data;
    },
    // 点击字段
    clickiduan() {
      this.newData2 = {
        field: "",
        name: "",
        required: "必填",
      };
      this.modal2 = true;
    },
    // 创建字段
    create2() {
      if (this.newData2.name == "") {
        this.$Message.error("请输入报名字段名称");
        return false;
      }
      this.tableData2.push({
        field: this.newData2.field,
        name: this.newData2.name,
        required: this.newData2.required,
      });
      this.newData2 = {
        field: "",
        name: "",
        required: "必填",
      };
    },
    // 删除字段
    delziduan(data) {
      this.$http(
        "/stage/activity/deleteActivityForm",
        {
          id: data.row.id,
        },
        "get",
        (res) => {}
      );
      this.tableData2.splice(data.$index, 1);
    },
    // 点击规则
    clickRule() {
      if (this.newData.time.length == 0) {
        this.$Message.error("请选择活动起止日期");
        return false;
      }
      this.timeList = this.getdiffdate(
        this.getTime(this.newData.time[0]),
        this.getTime(this.newData.time[1])
      );
      this.modal3 = true;
      this.newData3 = {
        bookDate: "",
        limitNum: "",
        timeRange: "",
      };
    },
    // 删除规则
    delRule(data) {
      this.$http(
        "/stage/activity/deleteActivityRule",
        {
          id: data.row.id,
        },
        "get",
        (res) => {}
      );
      this.tableData3.splice(data.$index, 1);
    },
    // 复制规则
    copyRule(data) {
      let time1 = data.row.timeRange.split("-")[0];
      let time2 = data.row.timeRange.split("-")[1];
      let time3 = new Date(
        "2020",
        "1",
        "1",
        parseInt(time1.split(":")[0]),
        parseInt(time1.split(":")[1]),
        parseInt(time1.split(":")[2])
      );
      let time4 = new Date(
        "2020",
        "1",
        "1",
        parseInt(time2.split(":")[0]),
        parseInt(time2.split(":")[1]),
        parseInt(time2.split(":")[2])
      );
      this.newData3 = {
        bookDate: data.row.bookDate,
        limitNum: data.row.limitNum,
        timeRange: [time3, time4],
      };
    },
    // 创建
    create3() {
      if (this.newData3.bookDate == "") {
        this.$Message.error("请选择日期");
        return false;
      }
      if (this.newData3.limitNum == "") {
        this.$Message.error("请输入限制人数");
        return false;
      }
      if (this.newData3.timeRange == "") {
        this.$Message.error("请选择时间段");
        return false;
      }

      // 是否只允许一天一场活动
      // for(let i=0;i<this.tableData3.length;i++){
      //   if(this.newData3.bookDate == this.tableData3[i].bookDate){
      //     this.$Message.error('该配置已存在');
      //     return false
      //   }
      // }

      this.tableData3.push({
        bookDate: this.getTime(this.newData3.bookDate),
        limitNum: this.newData3.limitNum,
        timeRange:
          this.getTime6(this.newData3.timeRange[0]) +
          "-" +
          this.getTime6(this.newData3.timeRange[1]),
      });
      this.newData3 = {
        bookDate: "",
        limitNum: "",
        timeRange: "",
      };
    },
    // 置顶或不置顶
    top(id) {
      this.$http(
        "/stage/activity/showTopActivity",
        {
          activityId: id,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success("操作成功");
            this.getActivityList();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    //
    list(id) {
      this.activityId = id;
      this.modal4 = true;
      this.loading3 = true;
      this.$http(
        "/stage/activity/getActivityForm",
        {
          activityId: id,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.tableColumn4 = [];
            for (let i = 0; i < res.data.data.length; i++) {
              this.tableColumn4.push({
                label: res.data.data[i].name,
                prop: res.data.data[i].field,
              });
            }
            this.joinId = id;
            this.getActivityJoinedPeople(id);
          } else {
            this.$Message.error(res.data.msg);
            this.loading3 = false;
          }
        }
      );
    },
    getActivityJoinedPeople(id) {
      this.$http(
        "/stage/activity/getActivityJoinedPeople",
        {
          activityId: id,
          states: "",
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.loading3 = false;
            this.tableData4 = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
            this.loading3 = false;
          }
        }
      );
    },
    black(data) {
      this.modal5 = true;
      this.newData4 = {
        openid: data.openid,
        name: data.name,
        phone: data.phone,
        time: "",
      };
    },
    submit3() {
      if (this.newData4.time == "") {
        this.$Message.error("解冻时间不能为空");
        return false;
      }
      this.loading4 = true;
      this.$http(
        "/stage/blacklist/saveActivityBlackList",
        {
          name: this.newData4.name,
          phone: this.newData4.phone,
          openid: this.newData4.openid,
          unLockTime: this.getTime2(this.newData4.time),
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success("拉入成功");
            this.loading4 = false;
            this.modal5 = false;
            this.getActivityJoinedPeople(this.joinId);
          } else {
            this.loading4 = false;
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    lookDetal(data) {
      this.modal6 = true;
      this.tableData5 = data.content;
    },
    download() {
      let that = this;
      axios({
        method: "post",
        url: this.baseUrl + "/stage/activity/exportBookExcel",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "blob",
        data: {
          activityId: this.activityId,
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          // let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);
          var data = res.data;
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(data); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURI(
            res.headers["content-disposition"].split("filename=")[1]
          );
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch((resp) => {
          that.$Message.error("下载失败");
        });
    },
    // 导出报名二维码
    code(id) {
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/activity/exportCheckinQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          activityId: id,
        },
      }).then(function (res) {
        let url = "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
        const image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
          const a = document.createElement("a"); // 生成一个a元素
          const event = new MouseEvent("click"); // 创建一个单击事件
          a.download = "签到二维码"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = url;
      });
    },
    // 导出报名二维码
    code2(id) {
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/activity/exportActivityBookQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          activityId: id,
        },
      }).then(function (res) {
        let url = "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
        const image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
          const a = document.createElement("a"); // 生成一个a元素
          const event = new MouseEvent("click"); // 创建一个单击事件
          a.download = "报名二维码"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = url;
      });
    },
    routerPath(id) {
      this.$notify({
        title: "小程序路径",
        message: "activity/detail/index?id=" + id,
      });
    },
    handel2(data) {
      console.log(this.tableData3);
      this.newData5 = {
        limitNum: data.row.limitNum,
        id: data.row.id,
      };
      this.modal7 = true;
    },
    submit5() {
      this.loading5 = true;
      this.$http(
        "/stage/activity/updateActivityRule",
        this.newData5,
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.loading5 = false;
            this.modal7 = false;
            for (let i = 0; i < this.tableData3.length; i++) {
              if (this.tableData3[i].id == this.newData5.id) {
                this.tableData3[i].limitNum = this.newData5.limitNum;
                return false;
              }
            }
          } else {
            this.loading5 = false;
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.table {
  margin-top: 10px;
}
</style>